<template>
    <div class="page">
        <div class="welcome">
            <p>Some Lovely Cat</p>
        </div>
        <img src="@/assets/images/loginCat.png" class="Cat">
        <div class="content">
            <ContentWaterfull />
        </div>
        <TabNav />
    </div>
</template>

<script setup>
defineOptions({
    name: 'HomePage'
})

import ContentWaterfull from './components/contentWaterfull.vue'
import TabNav from '@/components/TabNav/TabNav.vue'



</script>

<style lang="scss" scoped>
.page {
    background-color: #8D9F5E;
    width: 100%;
    height: 100vh;
    position: relative;

    .welcome {
        font-size: 31px;
        width: 176.16px;
        position: absolute;
        top: 30px;
        left: 25px;
        color: #fff;
    }

    .Cat {
        position: absolute;
        left: 180.58px;
        top: 34.5px;
        width: 181.68px;
        height: 134.07px;
    }

    .content {
        position: absolute;
        top: 170px;
        width: 100%;
        height: 495px;
        background-color: #fff;
        border-radius: 25px 25px 0 0;
    }


}
</style>